const topNav = document.querySelector('.top-nav')//获取顶部导航栏
const topTNav = document.querySelector('.topT-nav') 
const topBNav = document.querySelector('.topB-nav')
const rightNav = document.querySelector('.right-nav')//获取右侧导航栏
const price = document.querySelector('.price')
const date = document.querySelector('.date')
const racail = document.querySelector('.racail')
const compare = document.querySelector('.compare')
const countDown = document.querySelector('.count-down') //获取倒计时盒子 
const close = document.querySelector('.close') //获取关闭广告按钮

//接受一个对象,排除异己
function oppents(nth){
  //如果是初次加载
  let e = document.querySelector(`.right-nav li:nth-child(${nth})`)
  if(!document.querySelector('.active')){
    e.classList.add("active")
  }
  else{
    document.querySelector('.right-nav li[class="active"]').classList.remove('active')
    e.classList.add('active')
  }
}
//倒计时函数
function countTime(){
  let date = new Date()
  hour = date.getHours()
  hour = hour < 9 ? '0' + hour : String(hour) 
  min = date.getMinutes()
  min = min < 9 ? '0' + min : String(min)
  sec = date.getSeconds()
  sec = sec < 9 ? '0'+ sec : String(sec)
  countDown.innerHTML = `${hour}时 ${min}分 ${sec}秒`
}

// ------------------------------------------------------------------

//页面初始
window.addEventListener('load', ()=>{
  //为顶部导航栏的路由图标定位初始位置
  let leftT = document.querySelector('.item-1').offsetLeft
  topBNav.style.transform = `translateX(${leftT}px)`
  //初次获取时间
  countTime()
})
//获取时间
setInterval(()=>{countTime()},1000)

//顶部导航栏路由表的位置动态改变
topTNav.addEventListener('click',e=>{
    if(e.target.nodeName == 'DIV'){
      topBNav.style.transform = `translateX(${e.target.offsetLeft}px)`
    }
  })

window.addEventListener('scroll',()=>{
  //为顶部导航栏添加隐藏事件
    topNav.style.top = window.scrollY >= 300? `-${getComputedStyle(topNav).height}` : 0
})

//点击右侧导航跳转和变色事件
rightNav.addEventListener('click',e=>{
  let ele= e.target //简便计算
  if(ele.nodeName == 'LI'){
    //添加导航改变颜色事件
    oppents(e.target.dataset.nth)
    //跳转事件
    const targetElement = document.querySelector(`.big-box-banner > div:nth-child(${e.target.dataset.nth})`);
    window.scrollTo({
      top:targetElement.getBoundingClientRect().top + window.pageYOffset,
      behavior:'smooth'
    })
  } 
})

//判断位置,右侧导航自动高亮
window.addEventListener('scroll',()=>{
  const scrollValue = window.scrollY //获取视口偏移量
  const priceY = price.offsetTop
  const dateY = date.offsetTop
  const recailY = racail.offsetTop
  const compareY = compare.offsetTop
  let nth = 1
  if(scrollValue<=priceY) {nth = 1}
  else if(scrollValue<=dateY) {nth = 2}
  else if(scrollValue<=recailY) {nth = 3}
  else if(scrollValue<=compareY) {nth = 4}
  oppents(nth)
})

//删除广告
close.addEventListener('click',()=>{
  close.parentNode.style.display = 'none'
})

//插入广告